import React, { Component } from 'react';

import { Carousel } from 'antd-mobile';

import 'antd-mobile/lib/carousel/style/index.css';
import 'antd-mobile/lib/flex/style/index.css';
import '../static/styles/slide.css';

let dotStyle = {
    width:'6px',
    height:'6px'
};

let dotActiveStyle = {
    width:'6px',
    height:'6px'
};

class Slide extends Component {
    constructor(props){
        super(props);
        this.state = {
            data: [
                'http://cmspic.judacdn.com/tkjidi/upload/images/1712/06/5a2789b99fe99.jpg',
                'http://cmspic.judacdn.com/tkjidi/upload/images/1712/05/5a2614412bd3c.jpg',
                'http://cmspic.judacdn.com/tkjidi/upload/images/1712/06/5a2788d39def4.jpg'
            ],
            initialHeight: 200,
        }
    }
    componentDidMount() {
        // simulate img loading
        setTimeout(() => {
            this.setState({
                data: ['http://cmspic.judacdn.com/tkjidi/upload/images/1712/06/5a2789b99fe99.jpg',
                    'http://cmspic.judacdn.com/tkjidi/upload/images/1712/05/5a2614412bd3c.jpg',
                    'http://cmspic.judacdn.com/tkjidi/upload/images/1712/06/5a2788d39def4.jpg'],
            });
        }, 100);
    }
    render() {
        return (
            <Carousel
                className="gouxiaoge-carousel"
                autoplay={true}
                infinite
                selectedIndex={1}
                swipeSpeed={35}
                // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                // afterChange={index => console.log('slide to', index)}
                dotStyle={dotStyle}
                dotActiveStyle={dotActiveStyle}
            >
                {this.state.data.map(ii => (
                    <a href="http://www.baidu.com" key={ii}>
                        <img
                            src={ii }
                            alt="icon"
                            onLoad={() => {
                                // fire window resize event to change height
                                window.dispatchEvent(new Event('resize'));
                                this.setState({
                                    initialHeight: null,
                                });
                            }}
                        />
                    </a>
                ))}
            </Carousel>
        );
    }
}

export default Slide;
